<template>
    <div class="search-box">
        <!-- 首页与分类页的头部左侧布局 -->
        <div class="search-left" v-show="!showBar">
            <i class="iconfont icon-message"></i>
        </div>
        <!-- 搜索页面的头部左侧布局 -->
        <div class="search-left" v-show="showBar" @click="showBar=false">
            <i class="iconfont icon-left"></i>
        </div>
        <div class="search-input">
            <input type="text" :placeholder="searchBar.sketch" @focus="showBar=true" v-model="word" />
            <!-- <input type="text" placeholder="     男士长靴"> -->
        </div>
        <!-- 搜索页面的头部右侧布局 -->
        <div class="search-right" v-show="showBar" @click="setHistroyAndGoSearchGood(word)">搜索</div>
        <!-- 首页和分类页以及进入搜索详情页的头部右侧布局 -->
        <div class="search-right" v-show="!showBar">
            <router-link to="/cart" tag="i" class="iconfont icon-cart"></router-link>
        </div>
        <transition enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
            <SearchComponentPage v-show="showBar" class="searchComponent-box"
                :hotWords="searchBar.hotWord" :histroy="histroy"
                @update:clear="clearHistroy()" @update:reset="resetHistroy()"
            ></SearchComponentPage>
        </transition>
    </div>
</template>
<script>
import SearchComponentPage from "../views/SearchComponentPage";

import { mapState, mapMutations, mapActions } from "vuex";
export default {
    components: {
        SearchComponentPage
    },
    data() {
        return {
            showBar: false,
            word: "",
            histroy: []
        };
    },
    computed: {
        ...mapState(["searchBar"])
    },
    methods: {
        ...mapActions(["loadQuerySearchKey"]),
        setHistroyData(word) {
            //建立历史记录
            if (this.histroy.indexOf(word) == -1) {
                this.histroy.push(word);
                localStorage.setItem(
                    "histroyDatas",
                    JSON.stringify(this.histroy)
                );
            }
        },
        loadHistroyData(){//d
            let histroy=localStorage.getItem("histroyDatas")||"[]";
            // console.log("---",histroy);
            this.histroy=JSON.parse(histroy);
        },
        setHistroyAndGoSearchGood(word) {
            if (word == "") {//如果没有输入搜索值，则默认搜索热值
                word = this.searchBar.sketch;
            }
            this.setHistroyData(word);//将搜索的关键字存在localStorage中
            this.$router.push({
                path: "/searchGood?"+Math.random(),
                query: {
                    word
                }
            });
            console.log(this.histroy);
        },
        clearHistroy(){
            this.histroy=[];
        },
        resetHistroy(){
            this.loadHistroyData();
        }
    },
    mounted(){
        this.loadHistroyData();
        this.loadQuerySearchKey();
        this.loadHistroyData();
    }
};
</script>
<style lang="less" scoped>
//首页头部搜索栏样式
.search-box {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    box-sizing: border-box;
    height: @height;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: @white;
    border-bottom: 1px solid @gray-light;
    > .search-left {
        flex: 1;
        text-align: center;
        cursor: pointer;
        > i {
            font-size: 0.5rem;
            font-weight: bold;
            color: @dark;
            opacity: 0.7;
        }
    }
    > .search-input {
        flex: 3;
        box-sizing: border-box;
        // padding: 0rem 0.2rem;
        > input[type="text"] {
            width: 100%;
            height: @topHeight - 0.4rem;
            border: none;
            box-sizing: border-box;
            border-radius: 10px;
            background-image: url("");
            background-size: 0.4rem;
            background-repeat: no-repeat;
            background-color: @gray-ee;
            background-position: left center;
            padding-left: 0.4rem;
            &:focus {
                background-image: none;
                outline: none;
            }
        }
    }
    > .search-right {
        flex: 1;
        text-align: center;
        cursor: pointer;
        > i {
            font-size: 0.5rem;
            font-weight: bold;
            color: @dark;
            opacity: 0.7;
        }
    }
}
//显示搜索记录页面样式
.searchComponent-box {
    position: absolute;
    top: 1rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    // overflow-y: auto;
    z-index: 999;
    background-color: @white;
    height: 100vh;
}
</style>